import React, { useEffect, useState } from 'react'
import Comment  from "./pages/Comment";
import Home  from "./pages/Home";
import Search  from "./pages/Search";
import NotFound from './pages/NotFound';
import { BrowserRouter as Router,Link,Route ,NavLink,Switch} from "react-router-dom";
import "./index.css";

export default function App() {
  return (
   <>
    <Router>
    {/* <a href="#/home">Home</a> */}
      {/* 如果是‘/’，一定要加exact，不然每个navlink都能匹配到 */}
        <NavLink exact  to='/' >Home</NavLink>
        <NavLink  to='/comment' >comment</NavLink>
        <NavLink  to='/search' >search</NavLink>
      <div>
        <hr />
      </div>
      {/* {hash==='#/comment'&&<Comment></Comment> */}
      {/* 如果是‘/’，一定要加exact，不然每个route都会渲染 */}
      <Switch>
        <Route exact path='/' component={Home}></Route>
        <Route path='/comment' component={Comment}></Route>
        <Route path='/search' component={Search}></Route>
        {/* 最后匹配不到会渲染这个组件 */}
        <Route  component={NotFound}></Route>
      </Switch>
    </Router>
   </>
  )
}
